<template>
  <div class="task-submit">
    <div class="task-submit-picture" v-if="imgData">
      <div class="task-submit-picture-item" @click="onSelImg('img', index)">
        <img :src="imgData.resourceUrl" alt="" />
      </div>
      <div class="task-submit-name-item">
        <h1>{{ imgData.name }}</h1>
      </div>
      <!-- 底部 -->
      <div class="task-submit-bottom">
        <div class="task-submit-bottom-look">
          {{ imgData.lookNum }}
        </div>
        <div class="task-submit-bottom-good">
          {{ imgData.dzNum }}
        </div>
        <div class="task-submit-bottom-hot">
          {{ imgData.hotNum }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Component } from "vue-property-decorator";
/**
 * 圖片展示组件
 * 传入数据 data
 * {
        imgData: {
          id	number
          taskId	number	任务id	
          resourceUrl	string	任务资源url	
        }
    }
 */
@Component
export default class MyCard {
  imgData = {};
  MyCard(data) {
    this.imgData = data;
    console.log("imgData:", this.imgData);
  }
  onSelImg() {
    this.$router.push("/detaile");
  }
}
</script>

<style scoped lang="scss">
.task-submit {
  .task-submit-picture {
    // margin: 0 30px;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    box-shadow: 0px 4px 10px 0px rgba(62, 62, 62, 0.2);
    overflow: hidden;
    width: 100px;
    &-item {
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      max-height: 70px;
      overflow: hidden;
      img {
        width: 30px;
      }
    }
    .task-submit-name-item {
      margin: 0 auto;
      width: 92%;
      text-align: left;
      padding: 16px 0 21px 10px;
      border-bottom: 1px solid #d4d4d4;
      h1 {
        margin: 0;
        font-size: 19px;
        font-weight: 500;
      }
    }
    .task-submit-bottom {
      display: flex;
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: 400;
      &-look {
        width: 70px;
        padding: 25px 0;
        img {
          width: 20px;
        }
      }
      &-good {
        width: 70px;
        padding: 25px 0;
        img {
          width: 17px;
        }
      }
      &-hot {
        width: 120px;
        padding: 25px 0;
        margin-left: 30px;
        color: #ff5555;
        img {
          width: 14px;
        }
      }
    }
  }
}
</style>
